<script>
import request from '@/utils/request'
import ButtonList from '@/components/ButtonList'
import { commonMixin } from '@/mixins/common'

export default {
  name: 'processInstanceImage.',
  tag: 'noKeepalive',
  mixins: [commonMixin],
  components: {
    ButtonList
  },
  data() {
    return {
      imgUrl: '',
      viewProcessUrl: '/v1/activiti/procinstance/viewProcessInstanceImage',
      btnList: [
        {
          label: '关闭',
          methods: 'handleCancel',
          icon: 'el-icon-circle-close-outline',
          disabled: false
        }
      ]
    }
  },
  computed: {
    processInstanceId() {
      return this.$route.params['processInstanceId']
    }
  },
  created() {
    this.handleGetImg({ processInstanceId: this.processInstanceId })
  },
  methods: {
    handleCancel() {
      this.$router.push({
        path: '/activiti/procinstancehistory'
      })
    },
    handleImgLoad() {
      window.URL.revokeObjectURL(this.imgUrl) // 清除释放
      this.imgUrl = null
    },
    handleGetImg(params) {
      request({
        url: this.viewProcessUrl,
        responseType: 'blob',
        method: 'GET',
        params
      }).then(res => {
        const objectUrl = window.URL.createObjectURL(res)
        this.$refs.img.src = objectUrl
        this.imgUrl = objectUrl
      })
    }
  },
  // eslint-disable-next-line
  render(h) {
    return (
      <div class='procdefDetail'>
        <h2>执行流程图</h2>
        <img on-load={this.handleImgLoad} ref='img' class='img' />
        <ButtonList operateBtnList={this.btnList}></ButtonList>
      </div>
    )
  }
}
</script>

<style lang="scss">
.procdefDetail {
  box-sizing: border-box;
  padding: 20px 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .img {
    width: 800px;
    height: auto;
  }
  .c-button-list {
    margin-top: 20px;
    justify-content: flex-end;
    width: 100%;
  }
}
</style>
